<template>
	<view class="payment-record-container">
		<!-- 患者信息头部 -->
		<view class="patient-header">
			<view class="patient-info">
				<view class="patient-name">
					<text class="name">{{ currentPatient.name }}</text>
					<text class="tag">{{ currentPatient.tag }}</text>
				</view>
				<view class="patient-id">{{ currentPatient.idNumber }}</view>
			</view>
			<view class="switch-patient" @click="switchPatient">
				<view class="switch-icon">⇄</view>
				<text class="switch-text">切换就诊人</text>
			</view>
		</view>
		
		<!-- 时间筛选 -->
		<view class="filter-section">
			<view class="filter-tabs">
				<view 
					class="filter-tab" 
					:class="{ active: activeFilter === 'lastYear' }"
					@click="selectFilter('lastYear')"
				>
					近一年
				</view>
				<view 
					class="filter-tab" 
					:class="{ active: activeFilter === 'custom' }"
					@click="selectFilter('custom')"
				>
					选择时间
				</view>
			</view>
			
			<!-- 时间选择区域 -->
			<view class="date-picker-area" v-if="activeFilter === 'custom'">
				<view class="date-input-group">
					<view class="date-input">
						<text class="date-label">开始日期</text>
						<view class="date-field" @click="openDatePicker('start')">
							<text class="date-value">{{ startDate || '请选择开始日期' }}</text>
							<text class="date-arrow">▼</text>
						</view>
					</view>
					<view class="date-input">
						<text class="date-label">结束日期</text>
						<view class="date-field" @click="openDatePicker('end')">
							<text class="date-value">{{ endDate || '请选择结束日期' }}</text>
							<text class="date-arrow">▼</text>
						</view>
					</view>
				</view>
				<view class="date-actions">
					<view class="confirm-btn" @click="applyDateFilter">确定</view>
					<view class="reset-btn" @click="resetDateFilter">重置</view>
				</view>
			</view>
		</view>
		
		<!-- 缴费记录列表 -->
		<view class="payment-list">
			<view 
				class="payment-item" 
				v-for="(item, index) in paymentList" 
				:key="index"
				@click="viewDetail(item)"
			>
				<view class="payment-info">
					<view class="payment-type">{{ item.type }}</view>
					<view class="payment-department">{{ item.department }} {{ item.doctor }}</view>
					<view class="payment-time">{{ item.time }}</view>
				</view>
				<view class="payment-amount">
					<text class="amount">{{ item.amount }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentPatient: {
				name: '蒋峰',
				tag: '本人',
				idNumber: '622*********0909'
			},
			activeFilter: 'lastYear',
			startDate: '',
			endDate: '',
			paymentList: [
				{
					type: '西药费',
					department: '神经内科',
					doctor: '刘美',
					time: '2020-06-15 11:05',
					amount: '¥60.00'
				},
				{
					type: '西药费',
					department: '神经内科',
					doctor: '刘美',
					time: '2020-06-15 11:05',
					amount: '¥60.00'
				},
				{
					type: '西药费',
					department: '神经内科',
					doctor: '刘美',
					time: '2020-06-15 11:05',
					amount: '¥60.00'
				}
			]
		}
	},
	onLoad() {
		// 页面加载时初始化数据
		this.loadLastYearData()
	},
	methods: {
		switchPatient() {
			uni.showToast({
				title: '切换就诊人功能开发中',
				icon: 'none'
			})
		},
		selectFilter(filter) {
			this.activeFilter = filter
			if (filter === 'lastYear') {
				this.loadLastYearData()
			}
		},
		openDatePicker(type) {
			// 使用uni-app的日期选择器
			uni.showDatePicker({
				mode: 'date',
				success: (res) => {
					const selectedDate = res.date
					if (type === 'start') {
						this.startDate = selectedDate
					} else {
						this.endDate = selectedDate
					}
				},
				fail: () => {
					// 如果原生日期选择器不可用，使用模拟数据
					const mockDate = '2020-12-01'
					if (type === 'start') {
						this.startDate = mockDate
					} else {
						this.endDate = mockDate
					}
					uni.showToast({
						title: `已选择${type === 'start' ? '开始' : '结束'}日期`,
						icon: 'success'
					})
				}
			})
		},
		applyDateFilter() {
			if (!this.startDate || !this.endDate) {
				uni.showToast({
					title: '请选择开始和结束日期',
					icon: 'none'
				})
				return
			}
			
			if (this.startDate > this.endDate) {
				uni.showToast({
					title: '开始日期不能晚于结束日期',
					icon: 'none'
				})
				return
			}
			
			this.loadCustomDateData()
			uni.showToast({
				title: `已筛选 ${this.startDate} 至 ${this.endDate} 的记录`,
				icon: 'success'
			})
		},
		resetDateFilter() {
			this.startDate = ''
			this.endDate = ''
			this.loadLastYearData()
		},
		loadLastYearData() {
			// 加载近一年的数据
			this.paymentList = [
				{
					type: '西药费',
					department: '神经内科',
					doctor: '刘美',
					time: '2020-06-15 11:05',
					amount: '¥60.00'
				},
				{
					type: '西药费',
					department: '神经内科',
					doctor: '刘美',
					time: '2020-06-15 11:05',
					amount: '¥60.00'
				},
				{
					type: '西药费',
					department: '神经内科',
					doctor: '刘美',
					time: '2020-06-15 11:05',
					amount: '¥60.00'
				}
			]
		},
		loadCustomDateData() {
			// 根据选择的日期范围加载数据
			this.paymentList = [
				{
					type: '检查费',
					department: '骨科',
					doctor: '张医生',
					time: '2020-12-15 09:00',
					amount: '¥120.00'
				},
				{
					type: '治疗费',
					department: '心内科',
					doctor: '王医生',
					time: '2020-12-20 14:30',
					amount: '¥80.00'
				}
			]
		},
		viewDetail(item) {
			uni.navigateTo({
				url: `/pages/payment/detail?data=${encodeURIComponent(JSON.stringify(item))}`
			})
		}
	}
}
</script>

<style scoped>
.payment-record-container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.patient-header {
	background-color: #ffffff;
	padding: 30rpx 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #f0f0f0;
}

.patient-info {
	flex: 1;
}

.patient-name {
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
}

.name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-right: 15rpx;
}

.tag {
	background-color: #4A90E2;
	color: #ffffff;
	padding: 4rpx 12rpx;
	border-radius: 12rpx;
	font-size: 20rpx;
}

.patient-id {
	font-size: 26rpx;
	color: #999;
}

.switch-patient {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.switch-icon {
	font-size: 32rpx;
	color: #4A90E2;
	margin-bottom: 8rpx;
}

.switch-text {
	font-size: 24rpx;
	color: #666;
}

.filter-section {
	background-color: #ffffff;
	margin: 0 20rpx 20rpx 20rpx;
	padding: 20rpx;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.filter-tabs {
	display: flex;
	gap: 20rpx;
}

.filter-tab {
	padding: 15rpx 30rpx;
	border-radius: 25rpx;
	font-size: 28rpx;
	color: #666;
	background-color: #f5f5f5;
	border: 1rpx solid #e0e0e0;
}

.filter-tab.active {
	background-color: #4A90E2;
	color: #ffffff;
	border-color: #4A90E2;
}

.date-picker-area {
	margin-top: 20rpx;
	padding-top: 20rpx;
	border-top: 1rpx solid #f0f0f0;
}

.date-input-group {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	margin-bottom: 20rpx;
}

.date-input {
	display: flex;
	align-items: center;
}

.date-label {
	font-size: 28rpx;
	color: #666;
	width: 120rpx;
	flex-shrink: 0;
}

.date-field {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #f8f8f8;
	border: 1rpx solid #e0e0e0;
	border-radius: 8rpx;
	padding: 20rpx;
}

.date-value {
	font-size: 28rpx;
	color: #333;
}

.date-arrow {
	font-size: 24rpx;
	color: #999;
}

.date-actions {
	display: flex;
	gap: 20rpx;
}

.confirm-btn, .reset-btn {
	flex: 1;
	text-align: center;
	padding: 20rpx;
	border-radius: 8rpx;
	font-size: 28rpx;
}

.confirm-btn {
	background-color: #4A90E2;
	color: #ffffff;
}

.confirm-btn:active {
	background-color: #3A80D2;
}

.reset-btn {
	background-color: #f5f5f5;
	color: #666;
	border: 1rpx solid #e0e0e0;
}

.reset-btn:active {
	background-color: #e8e8e8;
}

.payment-list {
	padding: 0 20rpx;
}

.payment-item {
	background-color: #ffffff;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.payment-info {
	flex: 1;
}

.payment-type {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.payment-department {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 8rpx;
}

.payment-time {
	font-size: 26rpx;
	color: #999;
}

.payment-amount {
	text-align: right;
}

.amount {
	font-size: 32rpx;
	font-weight: bold;
	color: #f44336;
}
</style> 